<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta name="format-detection" content="telephone=no">
		<title>51微贷</title>	
		<link rel="stylesheet" type="text/css" href="../../css/mui.min.css">
		<link rel="stylesheet" type="text/css" href="../../css/mui.picker.min.css">
		<link rel="stylesheet" type="text/css" href="../../css/reset.css">
		<link rel="stylesheet" type="text/css" href="../../css/common.css">
		<link rel="stylesheet" type="text/css" href="../../css/icomoon/style.css">
		<script type="text/javascript" src="../../js/rem.js"></script>
	</head>
	<body>
		<div class="m-edit">
			<h3 class="header f-pr">
				<span>设置自动投标</span>
				<i class="icon-angle-left f-pa"></i>
			</h3>
			<div class="rbox">
				<div class="item">
					<p>预期年化利率区间</p>
					<div class="pb clearfix">
						<div class="ibox f-fl f-pr">
							<input type="text" placeholder="输入利率">
							<span class="unit f-pa">%</span>
						</div>
						<span class="line">--</span>
						<div class="ibox f-fr f-pr">
							<input type="text" value="14.4">
							<span class="unit f-pa">%</span>
						</div>
					</div>
				</div>
				<div class="item">
					<p>投资期限</p>
					<div class="pb clearfix">
						<div class="ibox f-fl f-pr">
							<input type="text" value="1">
							<span class="unit f-pa">月</span>
						</div>
						<span class="line">--</span>
						<div class="ibox f-fr f-pr">
							<input type="text" value="12">
							<span class="unit f-pa">月</span>
						</div>
					</div>
				</div>
			</div>
			<ul class="elist">
				<li>
					<label>预留金额</label>
					<input type="text" placeholder="请输入账户需保留金额">
					<span class="unit f-fr">元</span>
				</li>
			</ul>
			<ul class="elist">
				<li>
					<label>还款方式</label>
					<input type="text" id="payment" value="一次性/等额本息/先息后本/等本等息" readonly="readonly">
					<i class="icon-angle-right f-fr"></i>
				</li>
				<li>
					<label>投资类型</label>
					<input type="text" id="investtype" value="车贷/红本抵押" readonly="readonly">
					<i class="icon-angle-right f-fr"></i>
				</li>
			</ul>
			<ul class="elist">
				<li>
					<label>有效期</label>
					<p class="ml">
						<span><i class="check"></i><span>长期有效</span></span>
						<span class="custom"><i class="cicon"></i><span>自定义</span></span>
					</p>
				</li>
			</ul>
			<div class="rbox mp hide">
				<div class="item">
					<div class="pb clearfix">
						<div class="ibox f-fl f-pr">
							<input type="text" class="date" data-options='{"type": "date"}'>
							<span class="unit f-pa">&gt;</span>
						</div>
						<span class="line">--</span>
						<div class="ibox f-fr f-pr">
							<input type="text" class="date" data-options='{"type": "date"}'>
							<span class="unit f-pa">&gt;</span>
						</div>
					</div>
				</div>
			</div>
			<a class="btn">保存</a>
			<p class="tips"><i class="cicon check"></i><span>我已阅读并同意<a>《无忧微贷自动投标协议》</a></span></p>
		</div>

		<div class="overlay" id="payment-box">
			<div class="use-coupon" id="pbox">
				<p class="title">还款方式</p>
				<ul class="clist">
					<li class="cur"><span>一次性</span><i class="radio check"></i></li>
					<li class="cur"><span>等额本息</span><i class="radio check"></i></li>
					<li class="cur"><span>先息后本</span><i class="radio check"></i></li>
					<li class="cur"><span>等本等息</span><i class="radio check"></i></li>
				</ul>
				<a class="close">关闭</a>
			</div>
		</div>

		<div class="overlay" id="investtype-box">
			<div class="use-coupon" id="itbox">
				<p class="title">投资类型</p>
				<ul class="clist">
					<li class="cur"><span>车贷</span><i class="radio check"></i></li>
					<li class="cur"><span>红本抵押</span><i class="radio check"></i></li>
				</ul>
				<a class="close">关闭</a>
			</div>
		</div>

		<script type="text/javascript" src="../../js/zepto.min.js"></script>
		<script type="text/javascript" src="../../js/mui.min.js"></script>
		<script type="text/javascript" src="../../js/mui.picker.min.js"></script>

		<script type="text/javascript">
			$('.btn').on('tap', function(){
				mui.confirm('设置成功，是否马上启用该自动投标方案？', '', ['否', '是'], function(e){
					if(e.index == 1){
						//
					}
				});
			});

			getPayArray('#pbox .clist li', '#payment');
			getPayArray('#itbox .clist li', '#investtype');
			getInvestType();
			getPaymentWay();

			function getPaymentWay(){
				$('#payment').on('tap', function(){
					$('#payment-box, #pbox').addClass('active');
				});

				$('.close').on('tap', function(){
					$('#payment-box, #pbox').removeClass('active');
				});

				$('#pbox .clist').on('tap', 'li', function(){
					var radio = $(this).children('.radio');
					radio.toggleClass('check');
					$(this).toggleClass('cur');
					getPayArray('#pbox .clist li', '#payment');
				});
			}

			function getPayArray(obj, valObj){
				var arr = [];
				$(obj).each(function(){
					var radio = $(this).children('.radio');
					if(radio.hasClass('check')){
						var text = $(this).children('span').text();
						arr.push(text);
					}
				});
				$(valObj).val(arr);
			}

			function getInvestType(){
				$('#investtype').on('tap', function(){
					$('#investtype-box, #itbox').addClass('active');
				});

				$('.close').on('tap', function(){
					$('#investtype-box, #itbox').removeClass('active');
				});

				$('#itbox .clist').on('tap', 'li', function(){
					var radio = $(this).children('.radio');
					radio.toggleClass('check');
					$(this).toggleClass('cur');
					getPayArray('#itbox .clist li', '#investtype');
				});
			}

			$('.elist .ml > span').on('tap', function(){
				var icon = $(this).children('i');
				if(!icon.hasClass('check')){
					icon.removeClass('cicon').addClass('check');
					$(this).siblings().children('i').removeClass('check').addClass('cicon');
				}

				if($(this).hasClass('custom')){
					$('.rbox.mp').removeClass('hide');
				}else{
					$('.rbox.mp').addClass('hide');
				}
			});

			$('.date').on('tap', function(){
				var _self = this;
				if(_self.picker) {
					_self.picker.show(function (rs) {
						_self.value = rs.value;
						_self.picker.dispose();
						_self.picker = null;
					});
				} else {
					var optionsJson = _self.getAttribute('data-options') || '{}';
					var options = JSON.parse(optionsJson);
					_self.picker = new mui.DtPicker(options);
					_self.picker.show(function(rs) {
						_self.value = rs.value;
						_self.picker.dispose();
						_self.picker = null;
					});
				}
			})
		</script>
	</body>
</html>